<template>
	<!-- 为你推荐 -->
	<view class="hot-goods mx20 mb10" v-if="goodsList.length">
		<view class="goods-list x-f">
			<view class="goods-item" v-if="goods.Pid" v-for="goods in goodsList" :key="goods.Pid"><shopro-goods-card :detail="goods" :isTag="true"></shopro-goods-card></view>
		</view>
		<!-- <button v-if="total > perPage" class="cu-btn refresh-btn my20 x-f" @tap.stop="loadMore">
			<text class="cuIcon-refresh" :class="{ 'refresh-active': isRefresh }"></text>
			{{ listParams.page >= lastPage ? '收起' : '加载更多' }}
		</button> -->
	</view>
</template>

<script>
import shoproGoodsCard from '@/components/shopro-goods-card/shopro-goods-card-extend.vue';
export default {
	components: {
		shoproGoodsCard
	},
	data() {
		return {
			userInfo:{},
			listParams: {
				page: 1
			},
			lastPage: 1, //分页总数
			total: 0, //总商品数
			perPage: 0, //单页商品数
			goodsList: [],
			isRefresh: false
		};
	},
	props: {
		detail: {
			type: Object,
			default: null
		}
	},
	created() {
		this.userInfo=JSON.parse(uni.getStorageSync("userInfo")==''?null:uni.getStorageSync("userInfo"));
		
		if(this.detail.type=='storebest'){	//编辑推荐
			this.getGoodsList(0);			
		}else if(this.detail.type=='hotsale'){	//店铺热销商品
			this.getGoodsList(1);			
		}else if(this.detail.type=='storenew'){	//店铺最新商品
			this.getGoodsList(2);			
		}
	},
	computed: {},
	methods: {
		// 商品列表
		getGoodsList(trait) {
			let that = this;
			uni.request({
			    url: this.$config.API_Gateway,
				method:"POST",
				data:{
					"method": "API.Store.Categories.StoreTraitProduct.List",
					"ver": "1.0",
					"timestamp": parseInt(Date.parse(new Date()) / 1000 + 8 * 60 * 60).toString(),
					"format": "",
					"access_token": "",
					"session_token": "",
					"storeid": that.userInfo.StoreUserInfo.StoreId,
					"trait": trait,
					"count": 999,
					"storecid": 0
				},
				success: (res) => {
					this.goodsList=res.data.Items;
					console.log(this.goodsList);
			    }
			});
			
		}
	}
};
</script>

<style lang="scss">
// 为你推荐
.hot-goods {
	background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
	border-radius: 20rpx;
	.goods-list {
		flex-wrap: wrap;
		width: 710rpx;
		.goods-item {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			width: 345rpx;
			box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
			border-radius: 20rpx;
			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
	.refresh-btn {
		margin-left: 50%;
		transform: translateX(-50%);
		width: 156rpx;
		height: 50rpx;
		background: #ffffff;
		border-radius: 25rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		white-space: nowrap;
		.cuIcon-refresh {
			color: #dbdbdb;
			margin-right: 12rpx;
			font-size: 32rpx;
		}
	}
	.refresh-active {
		transform: rotate(360deg);
		transition: all linear 0.5s;
	}
}
</style>
